<template>
  <div class="main">
    <h2 class="user-title"><span>地址管理</span></h2>
    <div class="user-wrapper">
      <p class="header">收货地址</p>
      <div class="user-content" v-if="addressrList.length">
        <div class="content">
          <div class="content-left">
            <div class="address-first">
              <p class="address-default">
                <span>{{this.defaultAds[0].name}}</span>
                <span>{{this.defaultAds[0].province}}</span>
              </p>
            </div>
            <span class="name">{{this.defaultAds[0].name}}</span>
            <span>{{this.defaultAds[0].province}} {{this.defaultAds[0].city}} {{this.defaultAds[0].district}} {{this.defaultAds[0].address}} </span>
            <span class="phone">{{this.defaultAds[0].mobile}}</span>
          </div>
          <div class="content-right">
            <span class="default" v-if="this.defaultAds[0].status === 1">默认地址</span>
            <span class="set" @click="setDefault(areaFrom.id)" v-if="this.defaultAds[0].status === 0">设为默认地址</span>
            <span class="edit" @click="edit(areaFrom.id)">编辑</span>
            <span class="edit" @click="del(areaFrom.id,defaultAds[0].status)">删除</span>
          </div>
        </div>
        <div class="more-address" @click="moreAddress" v-if="addressSign == 1">更多地址</div>
        <div class="hide-address" v-if="addressSign == 2">
          <span class="hide_1" @click="hideAddress">收起地址</span>
          <div class="address-list" v-for="item in otherAds" :key="item.id">
            <div class="content">
              <div class="content-left">
                <div class="address-first">
                  <p class="hide_2">
                    <span>{{item.name}}</span>
                    <span>{{item.city}}</span>
                  </p>
                </div>
                <span class="name">{{item.name}}</span>
                <span>{{item.province}} {{item.city}} {{item.district}} {{item.address}} </span>
                <span class="phone">{{item.mobile}}</span>
              </div>
              <div class="content-right">
                <span class="set" @click="setDefault(item.id)">设为默认地址</span>
                <span class="edit" @click="edit(item.id)">编辑</span>
                <span class="edit" @click="del(item.id, item.status)">删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="user-content"  v-else style="padding:20px;text-align:center">暂无地址，请添加地址</div>
    </div>
    <div class="user-wrapper">
      <p class="header" v-if="this.saveorreset === 1">新增收货人信息</p>
      <p class="header" v-if="this.saveorreset === 2">修改收货人信息</p>
      <div class="user-content">
        <el-form ref="areaFrom" :model="areaFrom" :rules="areaRules" label-width="80px" size="mini"  label-position="left">
          <el-form-item label="所在地区" prop="area">
            <el-cascader
              clearable
              :options="areaData"
              v-model="areaFrom.area">
            </el-cascader>
          </el-form-item>
          <el-form-item label="收货人" prop="name">
            <el-input v-model="areaFrom.name" maxlength="15"></el-input>
          </el-form-item>
           <el-form-item label="详细地址" prop="address">
            <el-input v-model="areaFrom.address" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="areaFrom.mobile" maxlength="11"></el-input>
          </el-form-item>
           <!-- <el-form-item label="固定电话" prop="phone">
            <el-input v-model="areaFrom.phone"></el-input>
          </el-form-item> -->
          <el-button type="primary" v-if="this.saveorreset === 1" @click="save('areaFrom')">保存收货人信息</el-button>
          <el-button type="primary" v-if="this.saveorreset === 2" @click="saveEdit('areaFrom')">保存收货人信息</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {areaRules} from '@/data/rules'
import area from '@/data/area.js'
export default {
  data () {
    return {
      addressSign: 1, // 1为展开所有地址 2为收起地址
      saveorreset: 1, // 1为新增 2为编辑
      areaData: area,
      areaRules: areaRules,
      areaFrom: {
        area: [],
        address: '',
        name: '',
        mobile: '',
        phone: '',
        id: ''
      },
      Upstatus: '',
      addressrList: [], // 所有地址
      defaultAds: [], // 默认地址
      otherAds: [] // 默认地址除外的其他地址
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.addressrList = []
      this.defaultAds = []
      this.otherAds = []
      this.$http.post(this.$api + '/pc/orderShipping/findAllByCustId', {}).then(res => {
        if (res.responseCode === '0000') {
          this.addressrList = res.data
          this.defaultAds.push(res.data[0])
          this.addressrList.forEach(item => {
            // 获取其他地址
            if (item.status !== 1) {
              this.otherAds.push(item)
            }
          })
          this.getArea(this.defaultAds)
          this.getArea(this.otherAds)
          if (this.defaultAds[0]) {
            this.areaFrom.id = this.defaultAds[0].id
          }
        }
      })
    },
    // 新增地址
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post(this.$api + '/pc/orderShipping/addShipping', {
            name: this.areaFrom.name,
            mobile: this.areaFrom.mobile,
            address: this.areaFrom.address,
            province: this.areaFrom.area[0],
            city: this.areaFrom.area[1] || '',
            district: this.areaFrom.area[2] || ''
          }).then(res => {
            if (res.responseCode === '0000') {
              this.getData()
              this.$refs[formName].resetFields()
              this.$message.success({
                message: res.responseMsg
              })
            } else {
              this.$message.error({
                message: res.responseMsg
              })
            }
          }).catch(() => {
            this.$message.error({
              message: '请求超时！'
            })
          })
        }
      })
    },
    // 更新地址
    saveEdit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post(this.$api + '/pc/orderShipping/updateById', {
            id: this.areaFrom.id || '',
            name: this.areaFrom.name,
            mobile: this.areaFrom.mobile,
            address: this.areaFrom.address,
            province: this.areaFrom.area[0],
            city: this.areaFrom.area[1] || '',
            district: this.areaFrom.area[2] || '',
            status: this.Upstatus
          }).then(res => {
            if (res.responseCode === '0000') {
              this.$refs[formName].resetFields()
              this.saveorreset = 1
              this.getData()
              this.$message.success({
                message: res.responseMsg
              })
            } else {
              this.$message.error({
                message: res.responseMsg
              })
            }
          }).catch(() => {
            this.$message.error({
              message: '请求超时！'
            })
          })
        }
      })
    },
    // 设为默认地址
    setDefault (id, status) {
      this.$http.post(this.$api + '/pc/orderShipping/updateById', {
        id: id,
        status: 1
      }).then(res => {
        if (res.responseCode === '0000') {
          this.getData()
          this.addressSign = 1
          this.$message.success({
            message: res.responseMsg
          })
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 编辑地址
    edit (id) {
      this.areaFrom.area = []
      this.$http.post(this.$api + '/pc/orderShipping/findById', {
        id: id
      }).then(res => {
        if (res.responseCode === '0000') {
          this.areaFrom.area.push(res.data.province)
          this.areaFrom.area.push(res.data.city)
          this.areaFrom.area.push(res.data.district)
          this.areaFrom.name = res.data.name
          this.areaFrom.address = res.data.address
          this.areaFrom.mobile = res.data.mobile
          this.areaFrom.id = id
          this.Upstatus = res.data.status
          this.addressSign = 1
          this.saveorreset = 2
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 删除地址
    del (id, status) {
      this.$http.post(this.$api + '/pc/orderShipping/deleteById', {
        id: id,
        status: status
      }).then(res => {
        if (res.responseCode === '0000') {
          this.getData()
          this.$message.success({
            message: res.responseMsg
          })
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    moreAddress () {
      this.addressSign = 2
    },
    hideAddress () {
      this.addressSign = 1
    },
    // 遍历地址
    getArea (areaList) {
      if (areaList[0] !== undefined) {
        areaList.forEach(k => {
          this.areaData.forEach(item => {
            if (k.province === item.value) {
              k.province = item.label
              item.children.forEach(j => {
                if (j.value === k.city) {
                  k.city = j.label
                  if (k.city === k.province) {
                    k.city = ''
                  }
                  j.children.forEach(i => {
                    if (i.value === k.district) {
                      k.district = i.label
                    }
                  })
                }
              })
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.user-content{
  position: relative;
  .content{
    display: flex;
    justify-content: space-between;
    font-size: $fz_14;
    padding-top: 20px;
    .content-left{
      .address-first{
        // width: 140px;
        margin-right: 25px;
        padding-bottom: 7px;
        display: inline-block;
        p{
          // width: 142px;
          box-sizing: border-box;
          padding: 6px 20px 6px 0;
          span{
            padding-left: 16px;
          }
        }
        p.address-default{
          border: 2px solid $border_red;
          background: url(../../assets/images/icon-select.png) no-repeat right bottom;
        }
      }
      .name{
        margin-right: 30px;
      }
      .phone{
        margin-left: 40px;
      }
    }
    .content-right{
      margin-right: 25px;
      .set{
        color: $f_normal;
        border-bottom: 1px solid $f_normal;
        cursor: pointer;
      }
      .default{
        color: #ffffff;
        background: $success;
        margin-left: 15px;
        padding: 3px 6px;
        border-radius: 3px;
      }
      .edit{
        margin-left: 12px;
        color: $font-blue;
        border-bottom: 1px solid $font-blue;
        cursor: pointer;
        line-height: 32px;
      }
    }
  }
}
.user-content form {
  padding: 35px 0 25px 0;
  .el-input{
    width: 500px;
  }
}
.more-address{
  width: 70px;
  font-size: $fz_14;
  color: $font-blue;
  padding:10px 0 20px 0;
  background: url(../../assets/images/icon-down.png) no-repeat  60px 15px;
  cursor: pointer;
}
.hide-address{
  width: 100%;
  font-size: $fz_14;
  padding:5px 0 20px 0;
  margin-left: -25px;
  background:#ffffff url(../../assets/images/icon-up.png) no-repeat  85px 10px;
  border: 1px solid $border_color;
  box-shadow: 0px 3px 6px rgba(128, 128, 128, 0.3);
  position: absolute;
  z-index: 2;
  .hide_1{
    cursor: pointer;
    padding-left: 25px;
    color: $f_normal;
  }
  .content{
    margin:0 25px;
    border-bottom: 1px dotted $border-color;
    .content-right{
      margin-right: 0;
    }
    .set{
      color: $f_normal;
      border-bottom: 1px solid $f_normal;
      cursor: pointer;
    }
  }
  .hide_2{
    border: 1px solid $border-color;
  }
}
</style>
